<template>
  <div class="display-flex flex-1 flex-wrap-wrap  lable-content" @click='focus'>
    <div class='btn-lable display-flex align-items-center justify-content-flex-center' v-for='(tag, index) in tags' :key='index' @click='delTag(index)'>{{tag.name}} <span class="btn-del">x</span></div>
    <input type="text"
           ref='input'
            maxlength="20"
           class="normal-input flex-1"
           :placeholder="tags.length>0?'请输入标签名':'请填写标签名称，便于客户的维护与管理'"
           @keyup.enter="add"
           @keydown.delete="del"
           @blur="add"
           v-model='current'>
  </div>
</template>

<script>
    export default {
        props: {
            tags: Array,
            required: true,
            default: () => []
        },
        methods: {
            focus () {
                this.$refs.input.focus()
            },
            split (e) {
                e.preventDefault()
                this.add(e)
            },
            add (e) {
                const val = e.target.value
              if(val.trim().length === 0){
                return
              }
                if (!val) return
                for(let i=0;i<this.tags.length;i++){
                    if(this.tags[i].name==val){
                        return;
                    }
                }
                if (this.tags.indexOf(val) > -1) return
                this.tags.push({name:val.trim()})
                this.current = ''
            },
            del (e) {
                if (!e.target.value.length) {
                    let obj= this.tags.pop()
                  //  this.$emit('input', this.tags)
                    this.$emit('inputDelete',obj.name);
                }
            },
            delTag (index) {
                let name=this.tags[index].name;
                this.tags.splice(index, 1)
               // this.$emit('input', this.tags)

                this.$emit('inputDelete',name)
            }
        },
        watch: {
            tags: function (newVal, oldVal) {
                this.tags = newVal;
            }
        },
        data () {
            return {
                current: ''
            }
        }
    }
</script>

<style lang="less" type="text/less"  scoped>
  .lable-content{
    margin: .4rem .4rem .2rem .4rem;
    background: #F6F6F6;
    min-height: 2.1rem;
    padding: 5px 10px;
  }

  .btn-lable{
    margin-bottom: .25rem;
    border-radius: .06rem;
    border: 1px solid #F4F4F4;
    font-size: .24rem;
    color: #222;
    background: #fff;
    padding: .08rem .23rem;
    margin-right: .2rem;
    height: .54rem;
  }
  .btn-del{
    margin-left: .2rem;
  }
  input{
    font-size: .26rem;
    width: 40%;
  }
</style>
